<template>
	<view class="container">
		<view class="from_box">
			<view class="from_card">
				<view class="from_title">
					<view class="from_title_name">服务意向</view>
					<view class="from_title_tips">选择可提供服务类型与您的位置。</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>服务类型</view>
					<view class="from_item_value" @tap="openServiceTypePopup">
						<text
							:class="[petServiceTypeText ?'from_item_text_act' : '']">{{petServiceTypeText ? petServiceTypeText : '选择可提供的服务类型'}}</text>
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>接单地址</view>
					<view class="from_item_value" @tap="openMap">
						<text
							:class="['address_text' , addressTemporary ?'from_item_text_act' : '']">{{addressTemporary ? addressTemporary : '选择地址'}}</text>
						<image class="address_icon" :src="url + 'icon-92.png'" mode=""></image>
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label">详细地址</view>
					<view class="from_item_value">
						<textarea v-model="petCarefromData.address" placeholder="无需重复省市区,填写如楼栋、门牌号,请勿填写小区等地址信息"
							placeholder-style="color: #CACCCC" @blur="addressBlur" @confirm="addressConfirm" />
					</view>
				</view>
			</view>

			<view class="from_card">
				<view class="from_title">
					<view class="from_title_name"><text>*</text>养宠经历</view>
					<view class="from_title_tips">填写您的养宠经历方便工作室更了解你。</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>养宠时间</view>
					<view class="from_item_value">
						<input type="number" v-model="petCarefromData.petCareTime" placeholder="填写1~99的整数，不足1年填1"
							maxlength="2" :adjust-position="false" placeholder-style="color: #CACCCC"
							@blur="petCareTimeBlur" @confirm="petCareTimeConfirm" />
						<text class="from_item_value_right">年</text>
					</view>
				</view>
				<view class="from_item">
					<view class="from_item_label"><text>*</text>陪宠经验</view>
					<view class="from_item_value" @tap="openApplyPetPopup">
						<text
							:class="[petCarefromData.carePetExperience || petCarefromData.carePetExperience === 0 ?'from_item_text_act' : '']">{{petCarefromData.carePetExperience || petCarefromData.carePetExperience === 0 ? applyPet[petCarefromData.carePetExperience].name :'选择您的陪宠经验'}}</text>
						<uni-icons type="right" size="15"></uni-icons>
					</view>
				</view>
			</view>

			<view class="from_card">
				<view class="from_title">
					<view class="from_title_name"><text>*</text>养宠介绍&养宠技能</view>
					<view class="from_title_tips">申请通过后将会展示在您的陪宠师个人主页，请认真填写。</view>
				</view>
				<view class="from_item">
					<view :class="['from_item_textarea',petCarefromData.carePetSkill ?'from_item_text_act' : '']"
						@tap="openPopup">
						{{petCarefromData.carePetSkill ? petCarefromData.carePetSkill :'请描述:养宠经历、喂养方式、宠物现状、养宠技能、护理医疗技能、上门喂猫/遛狗经验等。若为宠物行业相关人员:相关资格证书、相关行业工作经历等。申请通过后将会展示到陪宠师主页，描述越完整，通过审核几率越高哦!'}}
					</view>
				</view>
			</view>

			<view class="from_card">
				<view class="from_title">
					<view class="from_title_name">补充说明</view>
					<view class="from_title_tips">图片不超过3M，最多20张。</view>
				</view>
				<view class="from_up_img">
					<template v-if="imgList">
						<view class="img_list" v-for="(imgItem,imgIndex) in imgList" :key="imgIndex">
							<image @tap="delImg(imgIndex)" class="del_icon" :src="url + 'icon-100.png'" mode=""></image>
							<image @tap="preview(imgItem)" class="img_list_imgs" :src="imgItem" mode=""></image>
						</view>
					</template>

					<view class="add_up_img" v-if="imgList.length < 20" @tap="upImg">
						<image class="" :src="url + 'icon-97.png'" mode=""></image>
					</view>

				</view>
			</view>
			<view class="bottom_btn">
				<view class="" @tap="getLookafter">提交</view>
			</view>
		</view>
		<uni-popup ref="popupRef" type="center" border-radius="10px 10px 0 0">
			<view class="popu_box">
				<textarea v-model="popupText" name="" id="" placeholder="" maxlength="200"
					placeholder-style="color: #CACCCC" @blur="carePetSkillBlur"
					@confirm="carePetSkillConfirm"></textarea>
				<view class="text_length">{{popupText.length || 0}}/200</view>
				<view class="popu_btn">
					<view class="xjs-btn-primary btn_box" @tap="closePopup(false)"> 取消</view>
					<view class="xjs-btn-primary" @tap="closePopup(true)"> 确定</view>
				</view>
			</view>

		</uni-popup>
		<uni-popup ref="popupApplyPetRef" type="bottom" :is-mask-click="false" background-color="#fff"
			border-radius="24rpx 24rpx 24rpx 24rpx">
			<view class="apply_pet">
				<view class="apply_pet_title">选择照顾宠物经验</view>
				<view class="apply_pet_list">
					<view :class="petCarefromData.carePetExperience === applyPetItem.type ? 'apply_pet_act': ''"
						v-for="(applyPetItem,applyPetIndex) in applyPet" :key="applyPetIndex"
						@tap="applyPetBtn(applyPetItem.type)">{{applyPetItem.name}}
					</view>
				</view>
				<view @tap="closeApplyPetPopup" class="xjs-btn-primary">确定</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupServiceTypeRef" type="bottom" :is-mask-click="false" background-color="#fff"
			border-radius="24rpx 24rpx 24rpx 24rpx">
			<view class="apply_pet">
				<view class="apply_pet_title"><text>选择服务类型（可多选）</text><uni-icons @tap="closeServiceTypePopup(false)"
						type="closeempty" size="15"></uni-icons></view>
				<view class="apply_pet_list">

					<template v-for="(serviceItem,serviceIndex) in petServiceType" :key="serviceIndex">
						<view :class="serviceItem.isSelected ? 'apply_pet_act' :'' " @tap="serviceTypeBtn(serviceIndex)"
							v-if="serviceItem.isShow == true">{{serviceItem.name}}
						</view>
					</template>
				</view>
				<view @tap="closeServiceTypePopup(true)" class="xjs-btn-primary">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, onMounted, computed, ref, defineProps } from 'vue'
	import config from '@/config/index'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	const emit = defineEmits(['confirm'])
	const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
	const { userInfo, access_token } = useUserStoreToRefs()
	const popupRef = ref()
	const popupApplyPetRef = ref()
	const popupServiceTypeRef = ref()
	const popupText = ref('')
	const imgList = ref([])
	const addressObject = ref()
	const addressTemporary = ref('')
	const props = defineProps({
		lookafterPetInfoData: {
			type: Object,
			default: {}
		}

	})
	const applyPet = ref([
		{ name: '现在养宠、有上门服务经验', type: 0 },
		{ name: '现在养宠、无上门服务经验', type: 1 },
		{ name: '曾经养宠、有上门服务经验', type: 2 },
		{ name: '曾经养宠、无上门服务经验', type: 3 }
	])
	const petServiceType = ref([
		{ name: '上门喂养', type: 0, isShow: true, isSelected: false },
		{ name: '上门遛狗', type: 1, isShow: true, isSelected: false },
		{ name: '基础清洁', type: 2, isShow: true, isSelected: false },
	])
	const petServiceTypeText = ref('')
	let petCarefromData = reactive<{
		serviceType ?: string | number
		province ?: string
		city ?: string
		area ?: string
		locationAddress ?: string
		address ?: string
		petCareTime ?: string | number
		carePetExperience ?: string | number
		carePetSkill ?: string
		location ?: string
		additionalRemark ?: string
	}>({
		serviceType: '',
		address: '',
		province: '',
		city: '',
		area: '',
		locationAddress: '',
		petCareTime: '',
		carePetExperience: '',
		carePetSkill: '',
		location: '',
		additionalRemark: ''
	})
	onLoad(() => {

	})
	onShow(() => {
		uni.$once('commitCheck', (data) => {
			addressObject.value = data
			addressTemporary.value = data.province + data.city + data.district + data.name + data.address
			petCarefromData.location = data.location
			petCarefromData.province = data.province
			petCarefromData.city = data.city
			petCarefromData.area = data.district
			petCarefromData.locationAddress = data.name + data.address

		});
	})
	onMounted(() => {
		petCarefromData = props.lookafterPetInfoData
	})

	const serviceTypeBtn = (index : number) => {
		petServiceType.value[index].isSelected = petServiceType.value[index].isSelected == true ? false : true
	}
	const openMap = () => {
		uni.navigateTo({
			url: '/pages/map/index/index'
		})
	}
	const openPopup = () => {
		popupText.value = petCarefromData.carePetSkill
		popupRef.value.open('')

	}
	const closePopup = (type : any) => {
		if (type) {
			petCarefromData.carePetSkill = popupText.value
		}
		popupRef.value.close()
	}
	const openApplyPetPopup = () => {
		popupApplyPetRef.value.open('')
	}
	const closeApplyPetPopup = () => {
		popupApplyPetRef.value.close()
	}
	const applyPetBtn = (type) => {
		petCarefromData.carePetExperience = type
	}
	const addressBlur = ({ detail: { value } } : any) => {
		petCarefromData.address = value
	}
	const addressConfirm = ({ detail: { value } } : any) => {
		petCarefromData.address = value
	}
	const openServiceTypePopup = () => {
		popupServiceTypeRef.value.open('')
	}
	const closeServiceTypePopup = (type) => {
		if (type == true) {
			petServiceTypeText.value = ''
			let petServiceTypeTextArr = []
			let petServiceTypeNumberArr = []
			petServiceType.value.forEach((item) => {
				if (item.isSelected) {
					petServiceTypeTextArr.push(item.name)
					petServiceTypeNumberArr.push(item.type)
				}
			})
			petServiceTypeText.value = petServiceTypeTextArr.join('、')
			petCarefromData.serviceType = petServiceTypeNumberArr.join(',')

		}
		popupServiceTypeRef.value.close()
	}
	const petCareTimeConfirm = ({ detail: { value } } : any) => {
		petCarefromData.petCareTime = value
	}
	const petCareTimeBlur = ({ detail: { value } } : any) => {
		petCarefromData.petCareTime = value
	}
	const carePetSkillBlur = ({ detail: { value } } : any) => {
		popupText.value = value
	}
	const carePetSkillConfirm = ({ detail: { value } } : any) => {
		popupText.value = value
	}
	const upImg = () => {
		let countNum = 10
		if (imgList.value) {
			countNum = 10 - imgList.value.length
		}

		uni.chooseImage({
			count: countNum,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有

			sourceType: ["album"], //从相册选择
			success: (res) => {
				console.log(res.tempFiles)
				let result = JSON.parse(JSON.stringify(res.tempFiles)).filter(item => {
					if (item.size > 3145728) {
						return item
					}
				})
				if (result.length > 0) {
					return toastfnc('请选择大小不超过3M的图片~')
				}
				uploadImage(res.tempFilePaths)
			}
		})
	}
	const uploadImage = (filePath) => {
		filePath.forEach((item, index) => {
			uni.uploadFile({
				url: config.api + '/api/mall/studio/apply-studio-record/uploadCoverPic',
				filePath: item,
				name: 'file',
				header: {
					'Authorization': access_token.value ? 'Bearer ' + access_token.value :
						'Basic bWFsbC1hcHA6bWFsbC1hcHA=',
					'x-flow-id': new Date().getTime(),
					"x-client-id": ""
				},
				success: async (uploadFileRes) => {
					imgList.value = imgList.value.concat(JSON.parse((uploadFileRes.data)).data)

				},
				fail: (error) => {
					console.error(error);
				}
			})
		})

	}
	const preview = (imgUrl) => {
		let images = [imgUrl]
		console.log(images, 'images')
		uni.previewImage({
			current: 0,
			urls: images,
		});
	}
	const delImg = (delIndex) => {
		console.log(delIndex)
		imgList.value.splice(delIndex, 1)
	}
	const getLookafter = () => {
		/* serviceType: '',
		address: '',
		province: '',
		city: '',
		area: '',
		locationAddress: '',
		petCareTime: '',
		carePetExperience: '',
		carePetSkill: '',
		location: '',
		additionalRemark: '' */
		if (!petCarefromData.serviceType) {
			return toastfnc('请选择可提供服务类型')
		}
		if (!petCarefromData.locationAddress) {
			return toastfnc('请完善接单地址')
		}
		if (!petCarefromData.petCareTime) {
			return toastfnc('请填写养宠经验')
		}
		if (!petCarefromData.carePetExperience) {
			return toastfnc('请填写照顾宠物经验')
		}
		if (!petCarefromData.carePetSkill) {
			return toastfnc('请填写养宠经理&养宠技能')
		}
		/* if(!petCarefromData.serviceType) {
			return toastfnc('请选择可提供服务类型')
		} */
		petCarefromData.additionalRemark = imgList.value.join(',')
		emit('confirm', petCarefromData)
	}
	const toastfnc = (tipsText : string) => {
		uni.showToast({
			title: tipsText,
			icon: 'none'
		})

	}
</script>


<style lang="scss" scoped>
	.container {
		padding-bottom: calc(var(--safe-area-bottom) + 104rpx);
	}

	.from_box {}

	.from_card {
		padding: 48rpx 32rpx;
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		line-height: 1;

		.from_title {

			.from_title_name {
				margin-bottom: 16rpx;
				font-size: 36rpx;
				color: #1B2120;
				font-weight: bold;

			}

			.from_title_tips {
				font-size: 24rpx;
				color: #7C807F;
			}
		}

		.from_item {
			margin-top: 64rpx;
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			line-height: 1;

			.from_item_label {
				width: 138rpx;
				color: #1B2120;
				font-weight: bold;

				text {
					color: #FF6084;
				}
			}

			.from_item_value {
				padding-bottom: 24rpx;
				width: 460rpx;
				border-bottom: 2rpx solid #E4E6E6;
				color: #CACCCC;
				display: flex;
				justify-content: space-between;

				.from_item_value_right {
					color: #1B2120;
				}

				input {
					width: 90%;
					margin-top: -14rpx;
					line-height: 1;
					color: #1B2120;
				}

				textarea {
					height: 80rpx;
					color: #1B2120;
				}

				.address_text {
					width: 400rpx;
				}

				.address_icon {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.from_item_textarea {

				line-height: 1.4;
				margin-top: -16rpx;
				border-radius: 16rpx;
				background-color: #F9F6F6;
				box-sizing: border-box;
				padding: 32rpx;
				color: #CACCCC;
				width: 622rpx;
				word-break: break-all;
			}

			.from_item_text_act {
				color: #1B2120;
			}



		}


		.from_up_img {
			padding: 32rpx 0 0 0;
			display: flex;
			flex-wrap: wrap;

			.img_list {
				margin: 16rpx 16rpx 0 0;
				width: 160rpx;
				height: 213rpx;
				position: relative;

				.del_icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}

				.img_list_imgs {
					width: 160rpx;
					height: 213rpx;
					border-radius: 4rpx;
				}
			}

			.add_up_img {
				margin: 16rpx 16rpx 0 0;
				width: 160rpx;
				height: 213rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #F9F6F6;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}

	.popu_box {
		background-color: #fff;
		height: 70vh;
		border-radius: 24rpx;
		padding: 40rpx;
		box-sizing: border-box;
		margin-bottom: 48rpx;
		font-size: 30rpx;
		color: #1B2120;

		textarea {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #F5F6F7;
			border-radius: 32rpx;
			height: 80%;
			line-height: 1.4;
		}

		.text_length {
			margin: 24rpx 0;
			display: flex;
			justify-content: flex-end;
		}
	}

	.popu_btn {
		display: flex;
		align-items: center;
		justify-content: space-between;

		view {
			width: 46%;
			//border-radius: 20rpx;
		}
	}

	.apply_pet {
		padding: 0 32rpx;

		box-sizing: border-box;
		line-height: 1;

		.apply_pet_title {
			padding-top: 48rpx;
			padding-bottom: 24rpx;
			font-size: 36rpx;
			color: #1A1A1A;
			font-weight: bold;
			text-align: center;

			text {
				margin-right: 100rpx;
			}
		}

		.apply_pet_list {
			padding-bottom: 48rpx;

			view {
				margin-top: 40rpx;
				width: 686rpx;
				height: 92rpx;
				line-height: 92rpx;
				box-sizing: border-box;
				background-color: #F5F6F7;
				text-align: center;
				font-size: 30rpx;
				color: #5C5E5E;
				border-radius: 400rpx;
			}

			.apply_pet_act {
				border: 2rpx solid #FF6084;
				background-color: #fff;
				color: #FF6084;
			}
		}
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding-bottom: calc(var(--safe-area-bottom));
		line-height: 1;

		view {
			width: 622rpx;
			margin: 8rpx auto;
			padding: 30rpx;
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 62rpx;
			text-align: center;
		}
	}
</style>